<template>
  <div>
    <div v-loading="dataLoading" style="margin-bottom:20px">
      <c-section title="设计需求变更申请结果">
        <c-list :column="3">
          <c-list-item label="门店建设项目号" :value="formData.constCode||'暂无'" />
          <c-list-item label="变更申请进度" dict-type-code="DESIGN_CHANGE_STATE" :value="formData.state||'暂无'" />
          <c-list-item label="是否重复设计" :value="formData.isRedesign===1?'是':'否'" />
          <c-list-item label="重复设计原因" dict-type-code="REDESIGN_REASON" :value="formData.redesignReason||'暂无'" />
          <c-list-item label="重复设计变更范围" dict-type-code="DECORATION_RANGE" :value="formData.changeRange||'暂无'" />
          <c-list-item label="门店编码" :value="formData.shopCode" />
          <c-list-item label="门店" :value="formData.shopName" />
          <c-list-item label="客户编码" :value="formData.clientCode" />
          <c-list-item label="所属客户" :value="formData.clientName" />
          <c-list-item label="经销商姓名" :value="formData.customerName" />
          <c-list-item label="经销商电话" :value="formData.customerPhone" />
          <c-list-item label="门店经营面积" :value="formData.shopArea" suffix="㎡" />
          <c-list-item label="所属办事处" :value="formData.officeName" />
          <c-list-item label="门店类型" dict-type-code="SHOP_TYPE" :value="formData.shopType " />
          <c-list-item label="门店业务类型" dict-type-code="BIZ_TYPE" :value="formData.shopBizType||'暂无'" />
          <c-list-item label="门店城市级别" dict-type-code="CITY_LEVEL" :value="formData.shopCityLevel||'暂无'" />
          <c-list-item label="门店市场层级" dict-type-code="MARKET_LEVEL" :value="formData.shopMarketLevel||'暂无'" />
          <!-- <c-list-item label="同门店客户经理" :value="formData.theSameCustomerMange||'暂无'" /> -->
          <c-list-item label="门店营业状态" dict-type-code="SHOP_BIZ_STATE" :value="formData.businessStatus" />
          <c-list-item label="门店详细地址" :span="3" :value="formData.shopAddress||'暂无'" />
          <c-list-item label="变更申请人" :value="formData.createBy||'暂无'" />
          <c-list-item label="变更申请时间" :value="formData.createTime||'暂无'" />
          <c-list-item type="textarea" label="图纸跟踪专员审核意见" :span="3" :value="formData.picTrackReviewAdvice" />
          <c-list-item type="textarea" label="领导审核意见汇总" :span="3" :value="formData.leadReviewAdviceSum" />
          <c-list-item type="textarea" label="变更说明" :span="3" :value="formData.changeDesc" />

        </c-list>
      </c-section>
      <c-section title="附件信息">
        <table-box
          ref="refChangeFile"
          :table-config="fileDataConfig"
          :table-height="200"
          :data="fileData"
          show-index
        />
      </c-section>
      <c-section title="设计基础信息变更记录">
        <div>
          <table-box
            ref="refTable"
            table-size="mini"
            :data="formData.designChangeBaseDetailList"
            :table-config="tableConfig"
            :table-height="300"
            show-index
          />
        </div>
      </c-section>
      <c-section title="设计区域及面积变更记录">
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="软体" name="Q014">
            <el-table
              :row-class-name="tableRowClassName"
              :data="softTableData"
              style="width: 100%"
            >
              <el-table-column type="expand">
                <template slot-scope="props">
                  <div style="width:90%;margin:20px 30px">
                    <el-table
                      :header-cell-style="{background:'#F6F6F6', borderRight:'1px solid #EBEEF5'}"
                      show-overflow-tooltip
                      border
                      :data="props.row.group"
                      style="width: 100%"
                    >
                      <el-table-column prop="styleName" label="所属专区" />
                      <el-table-column prop="adviceArea" label="建议面积" />
                      <el-table-column prop="seriesName" label="产品系列" />
                      <el-table-column prop="detailChangeType" label="方案变更明细">
                        <template slot-scope="scope">{{ formaterData(changeTypeOptions,scope.row.detailChangeType) }}</template>
                      </el-table-column>
                      <el-table-column prop="beforeVaule" label="变更前实际报图面积">
                        <template slot-scope="scope">{{ !scope.row.beforeVaule?0:scope.row.beforeVaule }}</template>
                      </el-table-column>
                      <el-table-column prop="afterVaule" label="变更后实际报图面积">
                        <template slot-scope="scope">{{ !scope.row.afterVaule?0:scope.row.afterVaule }}</template>
                      </el-table-column>
                      <el-table-column prop="seriesDesc" width="150" show-overflow-tooltip label="系列说明" />
                      <el-table-column prop="isMustUp" label="是否必上">
                        <template slot-scope="scope">{{ scope.row.isMustUp?'是':'否' }}</template>
                      </el-table-column>
                    </el-table>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="所属空间" prop="spaceName" />
              <el-table-column prop="changeType" label="变更类型">
                <template slot-scope="scope">{{ formaterData(changeTypeOptions,scope.row.changeType) }}</template>
              </el-table-column>
              <el-table-column label="空间说明" width="150" show-overflow-tooltip prop="spaceDesc" />
              <el-table-column label="建议上样面积" prop="adviceSampleArea" />
              <el-table-column prop="beforeActualAreaSum" label="变更前实际报图面积" />
              <el-table-column prop="afterActualAreaSum" label="变更后实际报图面积" />

            </el-table>
          </el-tab-pane>
          <el-tab-pane label="成品套房" name="Q015">
            <el-table
              :row-class-name="tableRowClassName"
              :data="productTableData"
              style="width: 100%"
            >
              <el-table-column type="expand">
                <template slot-scope="props">
                  <div style="width:90%;margin:20px 30px">
                    <el-table
                      :header-cell-style="{background:'#F6F6F6', borderRight:'1px solid #EBEEF5'}"
                      show-overflow-tooltip
                      border
                      :data="props.row.group"
                      style="width: 100%"
                    >
                      <el-table-column prop="styleName" label="所属专区" />
                      <el-table-column prop="adviceArea" label="建议面积" />
                      <el-table-column prop="seriesName" label="产品系列" />
                      <el-table-column prop="detailChangeType" label="方案变更明细">
                        <template slot-scope="scope">{{ formaterData(changeTypeOptions,scope.row.detailChangeType) }}</template>
                      </el-table-column>
                      <el-table-column prop="chooseCustomizedSeriesName" label="配套定制系列" />
                      <el-table-column prop="chooseCupboardSeriesName" label="配套橱柜系列" />
                      <el-table-column prop="beforeVaule" label="变更前实际报图面积">
                        <template slot-scope="scope">{{ !scope.row.beforeVaule?0:scope.row.beforeVaule }}</template>
                      </el-table-column>
                      <el-table-column prop="afterVaule" label="变更后实际报图面积">
                        <template slot-scope="scope">{{ !scope.row.afterVaule?0:scope.row.afterVaule }}</template>
                      </el-table-column>
                      <el-table-column prop="seriesDesc" width="150" show-overflow-tooltip label="系列说明" />
                      <el-table-column prop="isMustUp" label="是否必上">
                        <template slot-scope="scope">{{ scope.row.isMustUp?'是':'否' }}</template>
                      </el-table-column>
                      <el-table-column prop="enable" label="启用状态">
                        <template slot-scope="scope">{{ scope.row.enable?'启用':'停用' }}</template>
                      </el-table-column>
                    </el-table>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="所属空间" prop="spaceName" />
              <el-table-column prop="changeType" label="变更类型">
                <template slot-scope="scope">{{ formaterData(changeTypeOptions,scope.row.changeType) }}</template>
              </el-table-column>
              <el-table-column label="空间说明" width="150" show-overflow-tooltip prop="spaceDesc" />
              <el-table-column label="建议上样面积" prop="adviceSampleArea" />
              <el-table-column prop="beforeActualAreaSum" label="变更前实际报图面积" />
              <el-table-column prop="afterActualAreaSum" label="变更后实际报图面积" />
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="全屋定制" name="Q002">
            <el-table
              :row-class-name="tableRowClassName"
              :data="customizedTableData"
              style="width: 100%"
            >
              <el-table-column type="expand">
                <template slot-scope="props">
                  <div style="width:90%;margin:20px 30px">
                    <el-table
                      :header-cell-style="{background:'#F6F6F6', borderRight:'1px solid #EBEEF5'}"
                      show-overflow-tooltip
                      :data="props.row.group"
                      style="width: 100%"
                    >
                      <el-table-column prop="styleName" label="所属专区" />
                      <el-table-column prop="seriesName" label="产品系列" />
                      <el-table-column prop="assortEndProductSeriesName" label="配套成品系列" />
                      <el-table-column prop="adviceFirstSampleSpace" label="推荐首选上样空间">
                        <template slot-scope="scope">{{ formaterData(adviceSampleSpaceOptions,scope.row.adviceFirstSampleSpace) }}</template>
                      </el-table-column>
                      <el-table-column prop="adviceSecondSampleSpace" label="推荐次选上样空间">
                        <template slot-scope="scope">{{ formaterData(adviceSampleSpaceOptions,scope.row.adviceSecondSampleSpace) }}</template>
                      </el-table-column>
                      <el-table-column prop="detailChangeType" label="方案变更明细">
                        <template slot-scope="scope">{{ formaterData(changeTypeOptions,scope.row.detailChangeType) }}</template>
                      </el-table-column>
                      <el-table-column prop="beforeActureApplySampleSpace" label="变更前申请上样空间">
                        <template slot-scope="scope">{{ formaterData(adviceSampleSpaceOptions,scope.row.beforeActureApplySampleSpace) }}</template>
                      </el-table-column>
                      <el-table-column prop="afterActureApplySampleSpace" label="变更后申请上样空间">
                        <template slot-scope="scope">{{ formaterData(adviceSampleSpaceOptions,scope.row.afterActureApplySampleSpace) }}</template>
                      </el-table-column>
                      <el-table-column prop="recommendLevel" label="系列推荐级别">
                        <template slot-scope="scope">{{ formaterData(recommendLevelOptions,scope.row.recommendLevel||scope.row.seriesRecommendedLevel) }}</template>
                      </el-table-column>
                      <el-table-column prop="seriesStandardColor" width="150" show-overflow-tooltip label="系列标配色" />
                      <el-table-column prop="isMustUp" label="是否必上">
                        <template slot-scope="scope">{{ scope.row.isMustUp?'是':'否' }}</template>
                      </el-table-column>
                      <el-table-column prop="seriesDesc" width="150" show-overflow-tooltip label="系列说明" />
                    </el-table>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="所属空间" prop="spaceName" />
              <el-table-column prop="changeType" label="变更类型">
                <template slot-scope="scope">{{ formaterData(changeTypeOptions,scope.row.changeType) }}</template>
              </el-table-column>
              <el-table-column label="空间说明" width="150" show-overflow-tooltip prop="spaceDesc" />
              <el-table-column label="建议上样面积" prop="adviceSampleArea" />
              <el-table-column label="变更前实际报图面积" prop="beforeVaule" />
              <el-table-column label="变更后实际报图面积" prop="afterVaule" />

            </el-table>
          </el-tab-pane>
          <el-tab-pane label="整体橱柜" name="Q003">
            <el-table
              :row-class-name="tableRowClassName"
              :data="cupboardTableData"
              style="width: 100%"
            >
              <el-table-column type="expand">
                <template slot-scope="props">
                  <div style="width:90%;margin:20px 30px">
                    <el-table
                      :header-cell-style="{background:'#F6F6F6', borderRight:'1px solid #EBEEF5'}"
                      show-overflow-tooltip
                      :data="props.row.group"
                      style="width: 100%"
                    >
                      <el-table-column prop="styleName" label="所属专区" />
                      <el-table-column prop="seriesName" label="产品系列" />
                      <el-table-column prop="sampleRecommendLevel" label="上样推荐层级">
                        <template slot-scope="scope">{{ formaterData(sampleRecommendLevelOptions,scope.row.sampleRecommendLevel) }}</template>
                      </el-table-column>
                      <el-table-column prop="detailChangeType" label="方案变更明细">
                        <template slot-scope="scope">{{ formaterData(changeTypeOptions,scope.row.detailChangeType) }}</template>
                      </el-table-column>
                      <el-table-column prop="material" label="材质" />
                      <el-table-column prop="marketPosition" label="市场定位">
                        <template slot-scope="scope">{{ formaterData(marketPositionOptions,scope.row.marketPosition) }}</template>
                      </el-table-column>
                      <el-table-column prop="sampleCode" label="样品编码" />
                      <el-table-column prop="styleForm" label="款式形态">
                        <template slot-scope="scope">{{ formaterData(styleFormOptions,scope.row.styleForm) }}</template>
                      </el-table-column>
                      <el-table-column prop="isMustUp" label="是否必上">
                        <template slot-scope="scope">{{ scope.row.isMustUp?'是':'否' }}</template>
                      </el-table-column>
                      <el-table-column prop="recommendLevel" label="系列推荐级别">
                        <template slot-scope="scope">{{ formaterData(recommendLevelOptions,scope.row.recommendLevel||scope.row.seriesRecommendedLevel) }}</template>
                      </el-table-column>
                      <el-table-column prop="seriesDesc" width="150" show-overflow-tooltip label="系列说明" />
                    </el-table>

                  </div>
                </template>
              </el-table-column>
              <el-table-column label="所属空间" prop="spaceName" />
              <el-table-column label="适用设计方式" prop="suitDesignWay">
                <template slot-scope="scope">{{ formaterData(designWayOptions,scope.row.suitDesignWay) }}</template>
              </el-table-column>
              <el-table-column prop="changeType" label="变更类型">
                <template slot-scope="scope">{{ formaterData(changeTypeOptions,scope.row.changeType) }}</template>
              </el-table-column>
              <!-- <el-table-column label="变更前申请设计方式" prop="beforeCurrentApplyDesignWay">
                <template slot-scope="scope">{{ formaterData(designWayOptions,scope.row.beforeCurrentApplyDesignWay) }}</template>
              </el-table-column>
              <el-table-column label="变更后申请设计方式" prop="afterCurrentApplyDesignWay">
                <template slot-scope="scope">{{ formaterData(designWayOptions,scope.row.afterCurrentApplyDesignWay) }}</template>
              </el-table-column> -->
              <el-table-column label="空间说明" width="150" show-overflow-tooltip prop="spaceDesc" />
              <el-table-column label="建议上样面积" prop="adviceSampleArea" />
              <el-table-column prop="beforeVaule" label="变更前实际报图面积">
                <template slot-scope="scope">{{ !scope.row.beforeVaule?0:scope.row.beforeVaule }}</template>
              </el-table-column>
              <el-table-column prop="afterVaule" label="变更后实际报图面积">
                <template slot-scope="scope">{{ !scope.row.afterVaule?0:scope.row.afterVaule }}</template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="卫浴" name="Q004">
            <el-table
              :row-class-name="tableRowClassName"
              :data="bathroomTableData"
              style="width: 100%"
            >
              <el-table-column type="expand">
                <template slot-scope="props">
                  <div style="width:90%;margin:20px 30px">
                    <el-table
                      :header-cell-style="{background:'#F6F6F6', borderRight:'1px solid #EBEEF5'}"
                      show-overflow-tooltip
                      :data="props.row.group"
                      style="width: 100%"
                    >
                      <el-table-column prop="suitDesignWay" label="适用设计方式">
                        <template slot-scope="scope">{{ formaterData(designWayOptions,scope.row.suitDesignWay) }}</template>
                      </el-table-column>
                      <el-table-column prop="styleName" label="所属专区" />
                      <el-table-column prop="detailChangeType" label="方案变更明细">
                        <template slot-scope="scope">{{ formaterData(changeTypeOptions,scope.row.detailChangeType) }}</template>
                      </el-table-column>
                      <el-table-column prop="beforeVaule" label="变更前实际报图面积">
                        <template slot-scope="scope">{{ !scope.row.beforeVaule?0:scope.row.beforeVaule }}</template>
                      </el-table-column>
                      <el-table-column prop="afterVaule" label="变更后实际报图面积">
                        <template slot-scope="scope">{{ !scope.row.afterVaule?0:scope.row.afterVaule }}</template>
                      </el-table-column>
                      <el-table-column prop="isMustUp" label="是否必上">
                        <template slot-scope="scope">{{ scope.row.isMustUp?'是':'否' }}</template>
                      </el-table-column>
                      <el-table-column prop="seriesDesc" width="150" show-overflow-tooltip label="系列说明" />
                    </el-table>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="所属空间" prop="spaceName" />
              <el-table-column prop="changeType" label="变更类型">
                <template slot-scope="scope">{{ formaterData(changeTypeOptions,scope.row.changeType) }}</template>
              </el-table-column>
              <el-table-column label="空间说明" width="150" show-overflow-tooltip prop="spaceDesc" />
              <el-table-column label="建议上样面积" prop="adviceSampleArea" />
              <el-table-column prop="beforeSumArea" label="变更前实际报图面积" />
              <el-table-column prop="afterSumArea" label="变更后实际报图面积" />
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="样板间" name="Q005">
            <el-table
              :row-class-name="tableRowClassName"
              :data="modelTableData"
              style="width: 100%"
            >
              <el-table-column type="expand">
                <template slot-scope="props">
                  <div style="width:90%;margin:20px 30px">
                    <el-table
                      :header-cell-style="{background:'#F6F6F6', borderRight:'1px solid #EBEEF5'}"
                      show-overflow-tooltip
                      :data="props.row.group"
                      style="width: 100%"
                    >
                      <el-table-column prop="seriesName" label="产品系列" />
                      <el-table-column prop="sampleFunctionSpace" label="上样功能空间">
                        <template slot-scope="scope">{{ formaterData(adviceSampleSpaceOptions,scope.row.sampleFunctionSpace) }}</template>
                      </el-table-column>
                      <el-table-column prop="assortCupboardSeriesName" label="橱柜系列" />
                      <el-table-column prop="bathroomSeriesName" label="卫浴系列" />

                      <el-table-column prop="detailChangeType" label="方案变更明细">
                        <template slot-scope="scope">{{ formaterData(changeTypeOptions,scope.row.detailChangeType) }}</template>
                      </el-table-column>
                      <el-table-column prop="isMustUp" label="是否必上">
                        <template slot-scope="scope">{{ scope.row.isMustUp?'是':'否' }}</template>
                      </el-table-column>
                      <el-table-column prop="seriesDesc" width="150" show-overflow-tooltip label="系列说明" />
                    </el-table>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="所属空间" prop="spaceName" />
              <el-table-column prop="changeType" label="变更类型">
                <template slot-scope="scope">{{ formaterData(changeTypeOptions,scope.row.changeType) }}</template>
              </el-table-column>
              <el-table-column label="风格描述" prop="styleDesc" />
              <el-table-column label="户型" prop="houseType">
                <template slot-scope="scope">{{ formaterData(houseTypeOptions,scope.row.houseType) }}</template>
              </el-table-column>
              <el-table-column label="户型定位" prop="houseTypePosition">
                <template slot-scope="scope">{{ formaterData(housePositionOptions,scope.row.houseTypePosition) }}</template>
              </el-table-column>
              <el-table-column label="建议上样面积" prop="adviceSampleArea" />
              <el-table-column label="空间说明" width="150" show-overflow-tooltip prop="spaceDesc" />
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="情景间" name="Q019">
            <el-table
              :row-class-name="tableRowClassName"
              :data="sceneTableData"
              style="width: 100%"
            >
              <el-table-column type="expand">
                <template slot-scope="props">
                  <div style="width:90%;margin:20px 30px">
                    <el-table
                      :header-cell-style="{background:'#F6F6F6', borderRight:'1px solid #EBEEF5'}"
                      show-overflow-tooltip
                      :data="props.row.group"
                      style="width: 100%"
                    >
                      <el-table-column prop="styleName" label="所属专区" />
                      <el-table-column prop="seriesName" label="产品系列" />
                      <el-table-column prop="sampleFunctionSpace" label="上样功能空间">
                        <template slot-scope="scope">{{ formaterData(adviceSampleSpaceOptions,scope.row.sampleFunctionSpace) }}</template>
                      </el-table-column>
                      <el-table-column prop="customizedProductDesc" width="150" show-overflow-tooltip label="定制产品说明">
                        <template slot-scope="scope">{{ scope.row.customizedProductDesc|| scope.row.customProductDesc }}</template>
                      </el-table-column>
                      <el-table-column prop="assortEndProductDesc" width="150" show-overflow-tooltip label="配套成品说明" />
                      <el-table-column prop="referenceArea" label="参考面积" />
                      <el-table-column prop="detailChangeType" label="方案变更明细">
                        <template slot-scope="scope">{{ formaterData(changeTypeOptions,scope.row.detailChangeType) }}</template>
                      </el-table-column>
                      <el-table-column prop="isMustUp" label="是否必上">
                        <template slot-scope="scope">{{ scope.row.isMustUp?'是':'否' }}</template>
                      </el-table-column>
                      <el-table-column prop="seriesDesc" width="150" show-overflow-tooltip label="系列说明" />
                    </el-table>
                  </div>

                </template>
              </el-table-column>
              <el-table-column label="所属空间" prop="spaceName" />
              <el-table-column prop="changeType" label="变更类型">
                <template slot-scope="scope">{{ formaterData(changeTypeOptions,scope.row.changeType) }}</template>
              </el-table-column>
              <el-table-column label="空间说明" width="150" show-overflow-tooltip prop="spaceDesc" />
              <el-table-column label="变更前实际报图面积" prop="beforeVaule" />
              <el-table-column label="变更后实际报图面积" prop="afterVaule" />
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </c-section>
      <!-- 图片预览 -->
      <el-image-viewer
        v-if="imgDialogVisible"
        :on-close="handleCloseImg"
        :url-list="[previewImg]"
      />
    </div>
  </div>
</template>
<script>
import { getAreaList, getShopAttachment } from '@/api/common'
import { getDictByPatchType, getDictByType } from '@/api/dataDict'
import { getDetail } from '@/api/shopDesignChange'
import { formaterData } from '@/utils'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

import BackPageMixin from '@/mixins/backPage'
export default {
  name: 'ShopDesignChangeDetail',
  components: { ElImageViewer },
  mixins: [BackPageMixin],
  props: {
    // id: {
    //   type: String,
    //   default: ''
    // }
  },
  data() {
    return {
      changeId: '',
      imgDialogVisible: false,
      previewImg: '',
      fileData: [], // 附件
      zoneOptions: [
        { configAreaId: '软体', programsList: [] },
        { configAreaId: '成品套房', programsList: [] },
        { configAreaId: '全屋定制', programsList: [] },
        { configAreaId: '整体橱柜', programsList: [] },
        { configAreaId: '卫浴', programsList: [] },
        { configAreaId: '样板间', programsList: [] },
        { configAreaId: '情景间', programsList: [] }
      ],
      fileDataConfig: {
        hideFuncBar: true,
        tabIndex: 0,
        // 表格字段动态配置
        setting: [
          {
            prop: 'attachmentType',
            label: '附件类型',
            minWidth: '140'
          },
          {
            prop: 'attachmentName',
            label: '附件名称',
            minWidth: '140'
          },
          {
            prop: 'createBy',
            label: '创建人',
            minWidth: '140'
          },
          {
            prop: 'createTime',
            label: '上传时间',
            minWidth: '140'
          },
          {
            label: '操作',
            button: [
              {
                name: '预览',
                clickFun: this.handlePreview,
                className: 'table-handelclick-text',
                type: 'text'
              },
              {
                name: '下载',
                clickFun: this.handleDownload,
                className: 'table-handelclick-text',
                type: 'text'
              }
            ]
          }]
      },
      formaterData,
      adviceSampleSpaceOptions: [],
      changeTypeOptions: [], // 变更类型
      recommendLevelOptions: [], // 推荐级别
      designWayOptions: [], // 适用设计方式
      marketPositionOptions: [], // 市场定位
      styleFormOptions: [], // 款式形态
      housePositionOptions: [], // 户型定位
      houseTypeOptions: [], // 户型
      sampleRecommendLevelOptions: [],
      changeDetailList: [],
      activeName: 'Q014',
      softTableData: [],
      customizedTableData: [],
      cupboardTableData: [],
      bathroomTableData: [],
      modelTableData: [],
      productTableData: [],
      sceneTableData: [],
      tableData: [],
      formData: {},
      areaList: [],
      tableConfig: {
        hideFuncBar: true,
        tabIndex: 0,
        // 表格字段动态配置
        setting: [
          {
            prop: 'fieldName',
            label: '更改字段',
            minWidth: '140'
          },
          {
            prop: 'beforeContent',
            label: '变更前值',
            minWidth: '150'
          },
          {
            prop: 'afterContent',
            label: '变更后值',
            minWidth: '140'
          }
        ] },
      dataLoading: false,
      saveLoading: false
    }
  },
  created() {
    this.changeId = this.$route.query.id
    this.getDict()
    this.getFiles()
    this.getAreaSelect()
    this.getChangeData()
  },

  methods: {
    goBack() {
      this.$store.dispatch('views/goBack')
    },
    // 获取附件
    getFiles() {
      getShopAttachment(this.changeId).then(res => {
        this.fileData = res.data
      })
    },
    async   getDict() {
      const { SAMPLE_FUNCTION_SPACE, DESIGN_CHANGE_TYPE, RECOMMEND_LEVEL, SUIT_DESIGN_WAY, MARKET_POSITION, STYLE_FORM, HOUSE_TYPE_POSITION, HOUSE_TYPE, SAMPLE_RECOMMEND_LEVEL } =
       await getDictByPatchType(['SAMPLE_FUNCTION_SPACE', 'DESIGN_CHANGE_TYPE', 'RECOMMEND_LEVEL', 'SUIT_DESIGN_WAY', 'MARKET_POSITION', 'STYLE_FORM', 'HOUSE_TYPE_POSITION', 'HOUSE_TYPE', 'SAMPLE_RECOMMEND_LEVEL'])
      this.adviceSampleSpaceOptions = SAMPLE_FUNCTION_SPACE// 推荐上样空间
      this.changeTypeOptions = DESIGN_CHANGE_TYPE
      this.recommendLevelOptions = RECOMMEND_LEVEL
      this.designWayOptions = SUIT_DESIGN_WAY
      this.marketPositionOptions = MARKET_POSITION
      this.styleFormOptions = STYLE_FORM
      this.housePositionOptions = HOUSE_TYPE_POSITION
      this.houseTypeOptions = HOUSE_TYPE
      this.sampleRecommendLevelOptions = SAMPLE_RECOMMEND_LEVEL
    },
    getAreaSelect() {
      getAreaList().then(res => {
        if (res.success === 1) this.areaList = res.data.records
      })
    },
    handleDownload(file) {
      const a = document.createElement('a')
      const url = `/pdf-file/` + file.attachmentUrl
      const fileName = file.attachmentName
      a.href = url
      a.download = fileName
      a.click()
    },
    handleCloseImg() {
      this.imgDialogVisible = false
    },
    handlePreview(file) {
      this.previewImg = ''
      // const typeName = file.typeName
      const typeArr = file.attachmentUrl.split('.')
      const typeName = file.typeName || typeArr[typeArr.length - 1]
      if (typeName === 'jpg' || typeName === 'jpeg' || typeName === 'png') {
      // 图片预览
        this.imgDialogVisible = true
        let picUrl = process.env.VUE_APP_IMG_PREFIX + '/' + file.attachmentUrl
        if (file.attachmentUrl.indexOf('http') !== -1) {
          const url = file.attachmentUrl.split('cn')
          picUrl = process.env.VUE_APP_BPMPIC_PREFIX + url[url.length - 1]
        }
        this.previewImg = picUrl
      } else if (typeName === 'pdf' || typeName === 'doc' || typeName === 'docx' || typeName === 'xlsx' || typeName === 'xls') {
        // word,excel预览
        // const newFileUrl = encodeURIComponent(this.url + file.attachmentUrl)
        if (file.attachmentUrl.indexOf('http') === -1) {
          window.open(`${process.env.VUE_APP_OFFICE_PREFIX}?src=` + process.env.VUE_APP_IMG_PREFIX + file.attachmentUrl)
        } else {
          window.open(`${process.env.VUE_APP_OFFICE_PREFIX}?src=` + file.attachmentUrl)
        }
      } else {
        this.$message.warning('该文件类型不支持预览')
      }
    },
    sortArr(arr, str) {
      var sortArr = []
      var newArr = []
      // 临时的变量
      var tmp
      // 按照特定的参数将数组排序将具有相同值得排在一起
      arr = arr.sort(function(a, b) {
        var s = a[str]
        var t = b[str]
        return s < t ? -1 : 1
      })
      if (arr.length) {
        tmp = arr[0][str]
      }
      for (var i in arr) {
        if (arr[i][str] === tmp) {
          newArr.push(arr[i])
        } else {
          tmp = arr[i][str]
          sortArr.push(newArr)
          newArr = [arr[i]]
        }
      }
      sortArr.push(newArr)
      if (sortArr.length === 1 && sortArr[0].length === 0) return []
      else return sortArr
    },
    tableRowClassName({ row, rowIndex }) {
      return 'selected-highlight'
    },
    // 数据字典格式化数据
    formaterArea(arr, value) {
      if (!value || !arr) {
        return value || ''
      }
      let list = []
      if (typeof (value) === 'string') {
        list = value.split(',')
      } else {
        list = value
      }
      const temp = []
      arr.forEach((item) => {
        const flag = list.some(v => v === item.areaCode)
        if (flag) {
          temp.push(item.areaName)
        }
      })
      return temp.toString() || value
    },
    getChangeData() {
      if (this.changeId) {
        getDetail(this.changeId).then(res => {
          this.dataLoading = true
          if (res.success === 1 && res.data) {
            this.formData = res.data
            this.changeDetailList = res.data.designChangeBaseDetailList
            this.changeDetailList.forEach(el => {
              if (el.fieldName.includes('面积')) {
                el.beforeContent = el.beforeContent ? el.beforeContent + '㎡' : '0㎡'
                el.afterContent = el.afterContent ? el.afterContent + '㎡' : '0㎡'
              }

              if (el.codeType && el.codeType !== 'WHETHER' && el.fieldCode !== 'applySpecialZone') {
                this.switchDict(el.codeType, el.beforeContent).then(res => {
                  el.beforeContent = res
                })
                this.switchDict(el.codeType, el.afterContent).then(res => {
                  el.afterContent = res
                })
              }
              if (el.fieldName.includes('是否')) {
                if (el.beforeContent === '1' || el.beforeContent === '0') {
                  el.beforeContent === '1' ? el.beforeContent = '是' : el.beforeContent = '否'
                } else el.beforeContent === ''
                if (el.afterContent === '1' || el.afterContent === '0') {
                  el.afterContent === '1' ? el.afterContent = '是' : el.afterContent = '否'
                } else el.afterContent === ''
              }

              if (el.fieldCode === 'applySpecialZone') {
                el.beforeContent = this.formaterArea(this.areaList, el.beforeContent)
                el.afterContent = this.formaterArea(this.areaList, el.afterContent)
              }
            })
            let customizedArr = []
            let cupboardArr = []
            let bathroomArr = []
            let modelArr = []
            let softArr = []
            let productArr = []
            let sceneArr = []
            res.data.designChangeAreaSeriesDTOList.forEach(el => {
              if (el.areaCode === 'Q002') customizedArr.push(el)
              if (el.areaCode === 'Q003') cupboardArr.push(el)
              if (el.areaCode === 'Q004') bathroomArr.push(el)
              if (el.areaCode === 'Q005') modelArr.push(el)
              if (el.areaCode === 'Q014') softArr.push(el)
              if (el.areaCode === 'Q015') productArr.push(el)
              if (el.areaCode === 'Q019') sceneArr.push(el)
            })

            customizedArr = this.sortArr(customizedArr, 'spaceName')
            cupboardArr = this.sortArr(cupboardArr, 'spaceName')
            bathroomArr = this.sortArr(bathroomArr, 'spaceName')
            modelArr = this.sortArr(modelArr, 'spaceName')
            softArr = this.sortArr(softArr, 'spaceName')
            productArr = this.sortArr(productArr, 'spaceName')
            sceneArr = this.sortArr(sceneArr, 'spaceName')
            // 卫浴
            bathroomArr.forEach(item => {
              const obj = {
                spaceName: item[0].spaceName,
                suitDesignWay: item[0].suitDesignWay,
                changeType: item[0].changeType,
                spaceDesc: item[0].spaceDesc,
                adviceSampleArea: item[0].adviceSampleArea,
                afterSumArea: item[0].afterSumArea,
                beforeSumArea: item[0].beforeSumArea,
                group: item
              }
              this.bathroomTableData.push(obj)
            })
            // 情景间
            sceneArr.forEach(item => {
              const obj = {
                spaceName: item[0].spaceName,
                changeType: item[0].changeType,
                spaceDesc: item[0].spaceDesc,
                beforeVaule: item[0].beforeVaule || 0,
                afterVaule: item[0].afterVaule || 0,
                group: item
              }
              this.sceneTableData.push(obj)
            })
            // 样板间
            modelArr.forEach(item => {
              const obj = {
                spaceName: item[0].spaceName,
                changeType: item[0].changeType,
                styleDesc: item[0].styleDesc,
                houseType: item[0].houseType,
                adviceSampleArea: item[0].adviceSampleArea,
                houseTypePosition: item[0].houseTypePosition,
                roughlyAera: item[0].roughlyAera,
                spaceDesc: item[0].spaceDesc,
                group: item
              }
              this.modelTableData.push(obj)
            })
            // 全屋定制
            customizedArr.forEach(item => {
              const obj = {
                spaceName: item[0].spaceName,
                changeType: item[0].changeType,
                spaceDesc: item[0].spaceDesc,
                adviceSampleArea: item[0].adviceSampleArea,
                beforeVaule: item[0].beforeVaule,
                afterVaule: item[0].afterVaule,
                group: item
              }
              this.customizedTableData.push(obj)
            })
            // 橱柜
            cupboardArr.forEach(item => {
              const obj = {
                spaceName: item[0].spaceName,
                suitDesignWay: item[0].suitDesignWay,
                changeType: item[0].changeType,
                beforeCurrentApplyDesignWay: item[0].beforeCurrentApplyDesignWay,
                afterCurrentApplyDesignWay: item[0].afterCurrentApplyDesignWay,
                spaceDesc: item[0].spaceDesc,
                adviceSampleArea: item[0].adviceSampleArea,
                beforeVaule: item[0].beforeVaule, // 变更前实际报图面积
                afterVaule: item[0].afterVaule, // 变更后实际报图面积
                group: item
              }
              this.cupboardTableData.push(obj)
            })

            // 软体
            softArr.forEach(item => {
              let beforeSoftAreaSum = 0
              let afterSoftAreaSum = 0
              item.forEach(v => {
                afterSoftAreaSum = afterSoftAreaSum + Number(v.afterVaule || 0)
                beforeSoftAreaSum = beforeSoftAreaSum + Number(v.beforeVaule || 0)
              })
              const obj = {
                spaceName: item[0].spaceName,
                changeType: item[0].changeType,
                spaceDesc: item[0].spaceDesc,
                afterActualAreaSum: afterSoftAreaSum,
                beforeActualAreaSum: beforeSoftAreaSum,
                adviceSampleArea: item[0].adviceSampleArea,
                group: item
              }
              this.softTableData.push(obj)
            })

            // 套房成品
            productArr.forEach(item => {
              let beforeProductAreaSum = 0
              let afterProductAreaSum = 0
              item.forEach(v => {
                beforeProductAreaSum = beforeProductAreaSum + Number(v.beforeVaule || 0)
                afterProductAreaSum = afterProductAreaSum + Number(v.afterVaule || 0)
              })
              const obj = {
                spaceName: item[0].spaceName,
                changeType: item[0].changeType,
                spaceDesc: item[0].spaceDesc,
                beforeActualAreaSum: beforeProductAreaSum,
                afterActualAreaSum: afterProductAreaSum,
                adviceSampleArea: item[0].adviceSampleArea,
                beforeApplyArea: item[0].beforeApplyArea,
                afterApplyArea: item[0].afterApplyArea,
                group: item
              }
              this.productTableData.push(obj)
            })
            this.$forceUpdate()
            this.dataLoading = false
          }
        }).catch(() => {
          this.dataLoading = false
        })
      }
    },
    // 数据字典格式化数据
    async switchDict(dictTypeCode, value) {
      if (!dictTypeCode || !value) return value
      const dictData = await getDictByType(dictTypeCode)
      const v = /^\d+$/.test(value) ? value.toString().split(',') : value.split(',')
      const str = []
      for (const item of dictData) {
        if (v.includes(item.dictCode)) {
          str.push(item.dictName)
        }
      }
      return str.join(',')
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .el-breadcrumb__inner{
    color: $qup-color-primary;
  }
  /deep/.el-table--mini{
    width: 400px;
  }
</style>
